import { useEffect, useState } from 'react'
import styles from './index.module.scss'
import cm from 'classnames'
import Button from '../../button'
import { useShowLogin } from '@/utils/hooks'

const Index = props => {
  const showLogin = useShowLogin()
  let { content = '暂无匹配的搜索结果', className, loginTxt = '', img = '/images/null.png', style = {} } = props
  const [loginCode, setLogin] = useState(0) //0加载中1已登录2未登录
  useEffect(() => {
    setLogin(!localStorage.getItem('token') ? 2 : 1)
  }, [])

  return (
    <div className={cm(styles.null, className)} style={style}>
      <img loading="lazy" src={img} alt="空" />
      {loginCode === 2 ? (
        <>
          <p>{loginTxt}</p>
          <Button className={styles.logins} onClick={showLogin}>
            登录
          </Button>
        </>
      ) : null}
      {loginCode === 1 ? <p>{content}</p> : null}
    </div>
  )
}

export default Index
